<%@ page language="java" pageEncoding="utf-8" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>LINBIKE</title>

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/linbike.ico" type="image/x-icon"/>
    <!-- Bootstrap Core CSS -->
    <link href="js/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${pageContext.request.contextPath}/css/metisMenu.min.css" rel="stylesheet">

    <!-- Timeline CSS -->
    <link href="${pageContext.request.contextPath}/css/timeline.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${pageContext.request.contextPath}/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="${pageContext.request.contextPath}/js/morris/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${pageContext.request.contextPath}/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery -->
    <script src="js/jquery/1.11.3/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="js/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <%--<script src="../bower_components/raphael/raphael-min.js"></script>--%>

    <!-- Custom Theme JavaScript -->
    <script src="js/sb-admin-2.js"></script>
    
    <style>
        body{
            background-color: #fbfbfb;
        }




        .img{
            position: absolute;
            top:200px;
            width:1100px;
            height:540px;
            left:0px;
        }

        .logo{
            position: absolute;
            top:100px;
        }
        .transparent{
            background: rgba(0,0,0,0.0);
            margin-top:150px;
            border:0px;
        }
        #panel-heading{
            background: rgba(0,0,0,0.3);
        }
        .panel-title{
            text-align: center;
            color: #ffffff;
            font-size:18px;
        }

        .panel-default{
            background: rgba(0,0,0,0.3);
            width:360px;
            height:290px;
            margin-top:12%;
            /*box-shadow:0 0 1px 1px cornflowerblue;*/

        }


        .checkbox{
            color:#ffffff;
        }


        input:-webkit-autofill{
            -webkit-box-shadow : 0 0 0px 1000px white inset ;
            /*border : 1px solid #CCC !important ;*/
        }

        .nohighlight:focus {
            outline:none;
            -webkit-box-shadow : 0 0 0px 1000px white inset ;
        }
        .ma{
            width: 500px;
            margin-left: 750px;
        }

        .panel-heading, .panel-body, .panel-default{
            border: 0px;
        }
        .panel-heading{
            border-bottom: 1px solid transparent;
        }

    </style>
    <script>
        $(function(){
            var width = window.innerWidth;
            var left = (window.innerWidth-1220)/2;
            $(".img").css("margin-left",left);
        })
    </script>


</head>

<body>
<%--<div class="imgDiv">--%>
    <img class="img" src="images/green.jpg"/>
<%--</div>--%>
<div class="container">
    <div class="row">
        <div class="logo">
            <img src="images/qiqilogo.png" width="120px" height="120px"/>
        </div>
        <div class="col-md-4 col-md-offset-4 transparent ma">
            <div class="login-panel panel panel-default" id="login">
                <div class="panel-heading" id="panel-heading">
                    <h3 class="panel-title">用户登录</h3>
                </div>
                <div class="panel-body">
                    <form id="loginForm" name="loginForm" role="form"
                          action='${pageContext.request.contextPath}/v1/login' method="post">
                        <%--<fieldset>--%>
                            <div class="form-group">
                                <input class="form-control nohighlight" placeholder="username" name="username" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control nohighlight" placeholder="Password" name="password" type="password"
                                       value="">
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="remember" type="checkbox" value="Remember Me">记住我
                                </label>
                            </div>
                            <!-- Change this to a button or input when using this as a form -->
                            <input type="submit" class="btn btn-lg btn-success btn-block"
                                   value="登录"/>
                            <%--<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>--%>
                        <%--</fieldset>--%>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>



</body>

</html>
